導(dǎo)讀:A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂在電商和線上購(gòu)物快速發(fā)展的今天,擁有一個(gè)商城網(wǎng)站很是必要,關(guān)于試水獨(dú)立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網(wǎng)站?
發(fā)表日期:2020-07-07
文章編輯:興田科技
瀏覽次數(shù):6732
標(biāo)簽:
A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂
在電商和線上購(gòu)物快速發(fā)展的今天,擁有一個(gè)商城網(wǎng)站很是必要,關(guān)于試水獨(dú)立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網(wǎng)站?》查看。但是,搭建商城網(wǎng)站并不簡(jiǎn)單,慶幸的是目前市面上涌現(xiàn)了不少建站平臺(tái),起飛頁(yè)自助建站平臺(tái)就是其中一個(gè),各位商家可以借助起飛頁(yè)輕松搭建出一個(gè)好看、實(shí)用的商城網(wǎng)站。不過(guò)小飛最近卻聽(tīng)見(jiàn)不少站長(zhǎng)抱怨說(shuō)在安排網(wǎng)站布局、運(yùn)用產(chǎn)品圖片&視頻背景等方面沒(méi)什么想法,這不,今天小飛就特地整理了2017年10個(gè)最受歡迎的商城設(shè)計(jì)范例,希望能給大家?guī)?lái)一些啟發(fā)和靈感。
1. Simply Chocolate
Simply Chocolate是一家位于丹麥?zhǔn)锥几绫竟那煽肆?。公?a href="http:///" target="_blank">網(wǎng)站設(shè)計(jì)糅合了視差滾動(dòng)和微妙的懸浮動(dòng)效,整個(gè)網(wǎng)站十分生動(dòng)、有趣。當(dāng)你打開(kāi)網(wǎng)頁(yè)首屏?xí)r,不同的巧克力產(chǎn)品會(huì)向上滾動(dòng)呈現(xiàn),首屏也會(huì)變幻出相應(yīng)的顏色。而當(dāng)你向下滾動(dòng)鼠標(biāo)瀏覽主頁(yè)時(shí),屏幕中央會(huì)出現(xiàn)一塊巧克力,巧克力下方的杏仁、薄荷葉等元素是向上浮動(dòng)的。將鼠標(biāo)移到巧克力塊上,這會(huì)出現(xiàn)一個(gè)裂口,就像撕開(kāi)袋子的包裝,點(diǎn)擊即可進(jìn)入巧克力的細(xì)節(jié)介紹頁(yè)面,比如成分列表、產(chǎn)品外觀等。這種不同尋常的動(dòng)效設(shè)計(jì)可以帶給用戶全新的瀏覽體驗(yàn),有人擔(dān)心太多的動(dòng)效設(shè)置會(huì)讓用戶覺(jué)得眼花繚亂,其實(shí)并不然,因?yàn)榫W(wǎng)站背景上一次只重點(diǎn)呈現(xiàn)一個(gè)產(chǎn)品,每滾動(dòng)一下只能看見(jiàn)一種巧克力的介紹。
啟示:獨(dú)特的視差效果和懸浮動(dòng)效可以很好地突出產(chǎn)品。
2. Kvell
Kvell是一家經(jīng)營(yíng)現(xiàn)代家居用品的公司,它的商城網(wǎng)站真可謂十分美觀。網(wǎng)站主頁(yè)清晰地呈現(xiàn)了網(wǎng)站的各個(gè)區(qū)塊,比如導(dǎo)航按鈕、購(gòu)物車(chē)、CTA按鈕,用戶可以通過(guò)點(diǎn)擊"discover"進(jìn)行產(chǎn)品瀏覽,屏幕上水平滾動(dòng)條是一個(gè)很好的輔助,呈現(xiàn)了產(chǎn)品的幾大類(lèi)。當(dāng)然,這些區(qū)塊也可以進(jìn)一步細(xì)化,比如用戶可以點(diǎn)擊漢堡按鈕打開(kāi)垂直導(dǎo)航菜單,也可以點(diǎn)擊水平滾動(dòng)條的按鈕進(jìn)一步了解產(chǎn)品子類(lèi)別(子類(lèi)別頁(yè)面還設(shè)有豎直滾動(dòng)條作輔助,遙相呼應(yīng))。盡管網(wǎng)站各個(gè)區(qū)塊界限分明、彼此獨(dú)立,但它們的整體風(fēng)格是一致的:明亮的配色、超大的字體以及簡(jiǎn)潔的產(chǎn)品圖片。
啟示:新穎的導(dǎo)航設(shè)置更能激起用戶探索網(wǎng)站的興趣。
3. Drybar
Drybar號(hào)稱(chēng)"美發(fā)界星巴克",不剪發(fā)、不燙染,僅靠提供專(zhuān)業(yè)吹頭發(fā)服務(wù)在競(jìng)爭(zhēng)激烈的美發(fā)市場(chǎng)中打出一片屬于自己的天地,其優(yōu)秀的商城網(wǎng)站在這一過(guò)程中也助力不少。Drybar的商城使用了明亮的網(wǎng)站配色、微妙的懸浮動(dòng)畫(huà),充滿個(gè)性化特征,網(wǎng)站風(fēng)格獨(dú)特鮮明。在網(wǎng)站主頁(yè)上,主導(dǎo)航菜單是由各個(gè)圖標(biāo)鏈接組成的,將鼠標(biāo)放上去,各個(gè)圖標(biāo)會(huì)出現(xiàn)一些微妙的動(dòng)畫(huà),有的還會(huì)出現(xiàn)下拉菜單,這種設(shè)計(jì)很有意思。通過(guò)點(diǎn)擊它們,用戶還可以快速進(jìn)入相應(yīng)的頁(yè)面。而其中的"關(guān)于我們"頁(yè)面使用了標(biāo)志的黃色吹風(fēng)機(jī)圖標(biāo),當(dāng)用戶將鼠標(biāo)停留在這個(gè)圖標(biāo)上,它會(huì)上下伸縮??偟膩?lái)說(shuō),這種設(shè)計(jì)讓整個(gè)網(wǎng)站趣味盎然,但又不顯得繁瑣,讓用戶有恰到好處的感覺(jué)。
啟示:明亮配色和懸浮動(dòng)效能夠給用戶提供優(yōu)質(zhì)的反饋,能讓購(gòu)物體驗(yàn)更加愉悅。
4. Nordstrom
Nordstrom提供多種產(chǎn)品銷(xiāo)售,從時(shí)尚服裝、配飾、鞋包、家具再到廚房用品。對(duì)于這種產(chǎn)品種類(lèi)十分豐富的商城網(wǎng)站來(lái)說(shuō),最大的挑戰(zhàn)就是如何讓用戶快速找到自己想要的物品。Nordstrom就在網(wǎng)站中使用了超大導(dǎo)航菜單,這有節(jié)日禮品、設(shè)計(jì)師作品集、男士用品、女士用品、兒童用品、清倉(cāng)區(qū)等多個(gè)欄目,欄目中還有進(jìn)一步的細(xì)分。除此以外,網(wǎng)站的"搜索"按鈕也很顯眼,用戶可以直接輸入相關(guān)關(guān)鍵詞進(jìn)行查找。這些設(shè)置都有助于提升用戶的瀏覽體驗(yàn)。
啟示:產(chǎn)品豐富的商城網(wǎng)站最好在設(shè)置產(chǎn)品過(guò)濾選項(xiàng),以提升用戶體驗(yàn)。
5. Northernism
Northernism主營(yíng)手工制品,比較注重產(chǎn)品的簡(jiǎn)潔和設(shè)計(jì)美感。商城網(wǎng)站的設(shè)計(jì)也是以此為出發(fā)點(diǎn)的,它摒棄了傳統(tǒng)的商城設(shè)計(jì)模式,而是將產(chǎn)品圖片和文本放在固定的網(wǎng)格,從而達(dá)到讓人眼前一亮的感覺(jué)。這種網(wǎng)格式的頁(yè)面中都只包含了一些簡(jiǎn)單的圖片,網(wǎng)站留白十分豐富,這也讓它看上去更加高大上。
啟示:合理使用圖片能夠有效提升網(wǎng)站的整體格調(diào)。
6. The practical Man
The practical Man網(wǎng)站使用了表單式的布局,強(qiáng)烈的配色、硬朗的線條、無(wú)襯線字體都與網(wǎng)站主營(yíng)業(yè)務(wù)(男裝、男士用品)的理念很是契合,易給訪客留下鮮明、深刻的印象。除此以外,我們常見(jiàn)的商城網(wǎng)站通常都只在網(wǎng)站首屏使用一些非同尋常的設(shè)計(jì),其他產(chǎn)品頁(yè)面采取常規(guī)的設(shè)計(jì)。而The practical Man在這一點(diǎn)上的處理很是不同,它在整個(gè)網(wǎng)站中使用了一致的設(shè)計(jì)布局,即使是單個(gè)產(chǎn)品頁(yè)面的信息也被放置在一個(gè)個(gè)定義好的網(wǎng)格(比如價(jià)格、顏色、尺寸、概述等等),設(shè)計(jì)手法很是新穎獨(dú)特。
啟示:非常規(guī)的商城設(shè)計(jì)易樹(shù)立獨(dú)特鮮明的網(wǎng)站風(fēng)格。
7. press
如果你很喜歡逛書(shū)店但卻沒(méi)有時(shí)間出門(mén),不妨來(lái)press網(wǎng)站看看吧,在這你可以感受到實(shí)體書(shū)店的韻味。press網(wǎng)站充分利用好看的圖片、漂亮的排版來(lái)營(yíng)造真實(shí)書(shū)店中寧?kù)o的氛圍。首屏設(shè)有幻燈片效果,背景圖片會(huì)相繼出現(xiàn)。當(dāng)你下拉鼠標(biāo)時(shí),就可以看見(jiàn)不同類(lèi)型的書(shū)籍封面了,封面圖片的背景都是純色的(黑色或白色,這是為了減少對(duì)用戶不必要的干擾)。將鼠標(biāo)移動(dòng)到相應(yīng)書(shū)籍封面上,這還會(huì)出現(xiàn)相應(yīng)的細(xì)節(jié)描述。
啟示:少即是多,簡(jiǎn)潔的布局也可以傳遞豐富的信息。
8. A Book Apart
A Book Apart也是一個(gè)銷(xiāo)售書(shū)籍等相關(guān)商品的商城網(wǎng)站。這個(gè)網(wǎng)站也充分利用了自身的優(yōu)勢(shì),不使用漂亮、美觀的背景圖片,而是借助多彩的書(shū)本封面來(lái)輔助產(chǎn)品銷(xiāo)售。這在展示一個(gè)系列的書(shū)籍時(shí)尤為適用。
啟示:商城設(shè)計(jì)可充分結(jié)合自身產(chǎn)品的特點(diǎn)。
9. Ada Blackjack
Ada Blackjack是一個(gè)經(jīng)營(yíng)手工包和皮革制品的品牌。盡管這個(gè)網(wǎng)站在整體設(shè)計(jì)上都偏于傳統(tǒng)、并不新穎,但它卻很善于使用大圖。產(chǎn)品圖片大多十分簡(jiǎn)單、干凈,能讓產(chǎn)品自身散發(fā)出魅力,也能讓用戶聚焦于產(chǎn)品的品質(zhì)。除此以外,網(wǎng)站的Logo標(biāo)志和主導(dǎo)航菜單是固定的,當(dāng)用戶下拉滾動(dòng)或低級(jí)進(jìn)入單個(gè)產(chǎn)品頁(yè)面時(shí),它們都是保持不變的,這能方便用戶進(jìn)行點(diǎn)擊瀏覽。
啟示:簡(jiǎn)潔的圖片可以用來(lái)彰顯產(chǎn)品的高品質(zhì)。
10. Bellroy
Bellroy是一家銷(xiāo)售錢(qián)包的商城網(wǎng)站。它的主頁(yè)布局相對(duì)比較簡(jiǎn)單,主導(dǎo)航菜單、購(gòu)物車(chē)、CTA按鈕等。不過(guò)當(dāng)你深入探究時(shí),就會(huì)發(fā)現(xiàn)這個(gè)網(wǎng)站其實(shí)有很多不同設(shè)計(jì)的產(chǎn)品頁(yè)面,重點(diǎn)突出不同的產(chǎn)品。另外,Bellroy還在網(wǎng)站中插入了有趣的演示視頻,以Slim Your Wallet教程為例(見(jiàn)下圖),它對(duì)比了普通錢(qián)包和Bellroy錢(qián)包在插入多張卡片和零錢(qián)時(shí)的狀態(tài),整個(gè)過(guò)程是動(dòng)態(tài)的,以突出Bellroy錢(qián)包的容量和便捷性,這些視頻、動(dòng)畫(huà)能有效促進(jìn)用戶購(gòu)買(mǎi)行為的發(fā)生。
啟示:有趣的演示視頻和互動(dòng)性強(qiáng)的教程能夠極大地提升用戶的購(gòu)買(mǎi)欲望。
快來(lái)起飛頁(yè)自助建站平臺(tái)(http://www.qifeiye.com/?t_wd=a5)搭建一個(gè)屬于自己的商城網(wǎng)站吧!
<script>document.writeln('上一篇:
暫無(wú)信息更多新聞
2020
關(guān)于網(wǎng)站建設(shè),您不僅可以用文字、圖片、動(dòng)畫(huà)等方式宣傳自己的產(chǎn)品,而且可以介紹自己的企業(yè),發(fā)布企業(yè)新聞,介紹企業(yè)領(lǐng)導(dǎo),公布公司業(yè)績(jī),提供售后服務(wù),舉辦產(chǎn)品
View details
2020
關(guān)于網(wǎng)站建設(shè),總有很多人問(wèn)我百度怎么了?有什么變化,為什么不更新等等諸如此類(lèi)的問(wèn)題。不論是否百度做過(guò)算法調(diào)整,或許只要因?yàn)槟承┦虑榘俣炔桓?,也?huì)有
View details
2020
關(guān)于網(wǎng)站建設(shè),企業(yè)網(wǎng)站的作用更類(lèi)似于企業(yè)在報(bào)紙和電視上所做的宣傳企業(yè)本身及品牌的廣告。不同之處在于企業(yè)網(wǎng)站容量更大,企業(yè)可以把任何想讓客戶及公
View details
2023
周口企業(yè)網(wǎng)站建設(shè)指的是根據(jù)企業(yè)的需求和特點(diǎn),進(jìn)行網(wǎng)站規(guī)劃、設(shè)計(jì)和開(kāi)發(fā)的過(guò)程。通過(guò)周口企業(yè)網(wǎng)站建設(shè),企業(yè)可以創(chuàng)建一個(gè)具有專(zhuān)業(yè)形象、合理結(jié)構(gòu)、易于導(dǎo)航和良好用戶體驗(yàn)的網(wǎng)站,以吸引潛在客戶,并有效地傳達(dá)企業(yè)信息和價(jià)值主張。
View details